﻿<!--
Copyright (c) Microsoft Corporation. All rights reserved
-->

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title></title>
    <link rel="stylesheet" href="/css/scenario1_connectDisconnect.css">

    <!-- Custom Serial Device Access Sample Framework is loaded here because this page always loads before any other scenarios -->
    <script src="/js/constants.js"></script>
    <script src="/js/utilities.js"></script>
    <script src="/js/deviceListEntry.js"></script>
    <script src="/js/eventHandlerForDevice.js"></script>

    <script src="/js/scenario1_connectDisconnect.js"></script>
</head>

<body class="win-type-body">
    <div id="scenarioView">
        <div>
            <h2 id="sampleHeader" class="win-type-subheader">Device Selection</h2>
        </div>

        <div id="scenarioContent">

            <br>
            <span>
                <button id="buttonConnectToDevice" class="win-button">Connect to device</button>
                <button id="buttonDisconnectFromDevice" class="win-button">Disconnect from device</button>
            </span>
            <p>Select a Serial Device:</p>

            <div id="deviceListTemplate" data-win-control="WinJS.Binding.Template">
                <span data-win-bind="textContent: instanceId"></span>
            </div>

            <div id="deviceListView" data-win-control="WinJS.UI.ListView" data-win-options="{
            itemDataSource: deviceList.dataSource,
            itemTemplate: select(&apos;#deviceListTemplate&apos;),
            selectionMode: &apos;single&apos;,
            tapBehavior: &apos;directSelect&apos;,
            layout : {type: WinJS.UI.ListLayout}}">
            </div>

            <br>
            <br>

        </div>

        <div data-win-control="SdkSample.ScenarioOutput">

        </div>

    </div>
</body>

</html>